<template>
  <ElDropdown :disabled="disabled || !list.length" class="fa-widget-menu" size="medium" :show-timeout="100">
    <slot />

    <ElDropdownMenu slot="dropdown" class="fa-widget-menu__pop" :style="{ width: `${data.w}px` }">
      <ElDropdownItem
        v-for="(item, index) in list"
        :key="`${item.text}-${index}`"
        :icon="item.icon"
        class="fa-widget-menu__item"
        @click.native="click(item, $event)"
      >
        <i v-if="item.icon" :class="item.icon" class="fa-widget-menu__item-icon"></i>
        {{ item.text }}
      </ElDropdownItem>
    </ElDropdownMenu>
  </ElDropdown>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { WidgetMenuItem } from '@/types'
import { Widget } from '@/models'

/** 控件菜单 */
export default defineComponent({
  name: 'FaWidgetMenu',

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 禁用 */
    disabled: {
      type: Boolean,
      default: false
    },

    /** 菜单列表 */
    menu: {
      type: Array as PropType<WidgetMenuItem[]>,
      default: () => []
    }
  },

  setup(props) {
    return {
      /** 启用的菜单 */
      list: computed(() => props.menu.filter(item => item.enable !== false)),

      /** 点击菜单 */
      click(item: WidgetMenuItem, e: MouseEvent) {
        if (e.ctrlKey || e.metaKey) return

        e.stopPropagation()

        item.handler()
      }
    }
  }
})
</script>

<style lang="scss">
.fa-widget-menu {
  &.el-dropdown {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .fa-widget__box[disabled] {
    color: $color-text-primary;
    cursor: inherit;
  }

  &__pop.el-dropdown-menu {
    min-width: 100px;
    background-color: rgba(#fff, 0.9);
  }

  &__item {
    color: $color-text-primary;
    transition: all 0.25s ease-in-out;

    .el-dropdown-menu--medium &.el-dropdown-menu__item {
      font-size: 13px;
      line-height: 32px;
    }
  }
}
</style>
